<template>
  <div class="home">
		<Row class="echartsBox">
			<i-col span="6" class="pie1box1">
				<div id="pie1" class="pie"></div>
			</i-col>
			<i-col span="6" class="pie1box1 p2">
				<div id="pie2" class="pie"></div>
			</i-col>
			<i-col span="6" class="pie1box1">
				<div id="pie3" class="pie"></div>
			</i-col>
			<i-col span="6" class="pie1box1 last p2">
				<div id="pie4" class="pie"></div>
			</i-col>
		</Row>
		<div class="homeBox">
			<div class="title">
				访问量
			</div>
			<div class="eCharts lineBox">
				<div id="line"></div>
			</div>
		</div>
		<div class="homeBox">
			<div class="title">
				启动应用量
			</div>
			<div class="eCharts" id="bar"></div>
		</div>
		<div class="homeBox">
			<div class="title">
				启动应用量
			</div>
			<div class="eCharts" id="line2"></div>
		</div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill' // 引入水球js
export default {
  data () {
    return {
			counter: 1,
			grid: {left: '50px', right: '50px'},
			line1Data: [4820, 932, 901, 934, 1290, 1330, 1320, 4820, 932, 901, 934, 1290, 1330, 1320, 4820, 932, 901, 934, 1290, 1330, 1320],
			line2Data: [3820, 932, 901, 934, 1290, 1330, 1320, 3820, 932, 901, 934, 1290, 1330, 1320, 3820, 932, 901, 934, 1290, 1330, 1320]
    }
  },
  computed: {
  },
  methods: {
		liquidFill (id, title, subTitle, num, color, color2) { // 方法
			var liquid = echarts.init(document.getElementById(id))
			liquid.setOption({
				title: { // 标题
						text: title,
						subtext: subTitle,
						textStyle: { // 标题的样式
								color: '#0F0F0F', // 字体颜色
								fontFamily: 'Microsoft YaHei', // 字体
								align: 'center', // 文字的水平方式
								verticalAlign: 'middle' // 文字的垂直方式
						},
						left: 'center', // 定位
						y: '160px'
						// backgroundColor: '#03dbdb' // 文字区域的背景颜色
					},
					series: [{
							type: 'liquidFill', // 类型
							data: [num, num], // 数据是个数组 数组的每一项的值是0-1
							label: {
								normal: {
									textStyle: {
										fontSize: 20,
										color: '#848484'
									}
								}
							},
							outline: {
									// show: true , //是否显示轮廓 布尔值
									borderDistance: 0, // 外部轮廓与图表的距离 数字
									itemStyle: {
											// borderColor:'rgba(255,0,0,0.09)', //边框的颜色
											borderWidth: 0 // 边框的宽度
											// shadowBlur: 5 , // 外部轮廓的阴影范围 一旦设置了内外都有阴影
											// shadowColor: '#000' //外部轮廓的阴影颜色
									}
							},
							backgroundStyle: {
									color: color2, // 图表的背景颜色
									// borderWidth: '10',//图表的边框宽度
									// borderColor: '#000',//图表的边框颜色
									itemStyle: {
										shadowBlur: 100, // 设置无用
										shadowColor: '#f60', // 设置无用
										opacity: 1 // 设置无用
									}
							},
							itemStyle: {
									opacity: 0.5, // 波浪的透明度
									shadowBlur: 10, // 波浪的阴影范围
									shadowColor: '#f60' // 阴影颜色
							},
							emphasis: {
									itemStyle: {
											opacity: 1 // 鼠标经过波浪颜色的透明度
									}
							},
							color: ['rgba(255,0,0,0.3)', color, 'rgba(255,0,0,0.3)'], // 水波的颜色 对应的是data里面值
							shape: 'circle', // 水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
							center: ['50%', '30%'], // 图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
							radius: '50%', // 图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
							amplitude: 3, // 振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
							waveLength: '50%', // 波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
							phase: 0, // 波的相位弧度 默认情况下是自动
							period: (value, index) => { // 控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引
									return index * 2000
							},
							direction: 'left', // 波移动的速度 两个参数  left 从右往左 right 从左往右
							waveAnimation: true, // 控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
							animationEasing: 'linear', // 初始动画
							animationEasingUpdate: 'quarticInOut', // 数据更新的动画效果
							animationDuration: 3000, // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
							animationDurationUpdate: 300 // 数据更新动画的时长

					}]
					// backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
			})
    },
		line1 () {
			var myChart = echarts.init(document.getElementById('line'))
			myChart.setOption({
				grid: {
					top: 0,
					left: 0,
					bottom: 0,
					right: 0
				},
				tooltip: {
					trigger: 'item',
					extraCssText: 'height:200px;width:' + 1 / this.line1Data.length * 100 + '%;margin-left:-' + (1 / this.line1Data.length * 100) / 2 + '%; 	background: linear-gradient(#F1F3F8, #FCFCFE);color:#000;text-align:center;',
					position: function (point, params, dom, rect, size) {
						// 固定在顶部
						return [point[0], '0']
					},
					formatter: '<pre style="width:50px;position: absolute;bottom:0;left:50%;margin-left:-25px">{b}<div style="border-bottom: 2px solid #D41D2C"></div>{c}</pre>'
				},
				xAxis: {
					position: 'top',
					type: 'category',
					data: ['1/24\n2019', '1/25\n2019', '1/26\n2019', '1/27\n2019', '1/28\n2019', '1/29\n2019', '1/30\n2019', '1/24\n2019', '1/25\n2019', '1/26\n2019', '1/27\n2019', '1/28\n2019', '1/29\n2019', '1/30\n2019', '1/24\n2019', '1/25\n2019', '1/26\n2019', '1/27\n2019', '1/28\n2019', '1/29\n2019', '1/30\n2019'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'solid',
							color: '#F2F2F2', // 左边线的颜色
							width: '2' // 坐标线的宽度
						}
					},
					axisLabel: {
						color: '#848484', // 刻度线标签颜色
						margin: -60
					}
				},
				yAxis: {
					type: 'value',
					show: false,
					max: 8000
				},
				series: [{
					data: this.line1Data,
					type: 'line',
					symbol: 'circle',
					symbolSize: 8,
					itemStyle: {
						normal: {
							corlor: '#333',
							borderColor: '#f58f23',
							borderWidth: 0
						}
					}
				},
				{
					data: this.line2Data,
					type: 'line',
					symbol: 'circle',
					symbolSize: 5,
					smooth: true,
					itemStyle: {
							normal: {
								lineStyle: {
									width: 5 // 折线宽度
								}
							}
						}
				}]
			})
		},
		bar () {
			var myChart = echarts.init(document.getElementById('bar'))
			myChart.setOption({
				grid: this.grid,
				xAxis: {
					type: 'category',
					data: ['应用', '应用', '应用', '应用', '应用', '应用', '应用'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: true
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#848484' // 坐标值得具体的颜色
						}
					}
				},
				yAxis: {
					type: 'value',
					show: true,
					splitLine: {
						show: true
					},
					axisTick: {
						show: false
					}
				},
				series: [{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'bar',
					barWidth: 30,
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#D80D17'
							}, {
								offset: 0.8,
								color: '#EA531F'
							}], false)
						}
					}
				}]
			})
		},
		line2 () {
			var myChart = echarts.init(document.getElementById('line2'))
			myChart.setOption({
				grid: this.grid,
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true
					}
				},
				yAxis: {
					type: 'value',
					show: false,
					max: 8000
				},
				tooltip: {
					trigger: 'axis',
					extraCssText: 'height:200px;width:' + 1 / this.line2Data.length * 100 + '%;margin-left:-' + (1 / this.line2Data.length * 100) / 2 + '%; 	background: linear-gradient(#F1F3F8, #FCFCFE);color:#000;text-align:center;',
					position: function (point, params, dom, rect, size) {
						// 固定在顶部
						return [point[0], '0']
					},
					formatter: '<pre style="width:50px;position: absolute;bottom:0;left:50%;margin-left:-25px">{b}<div style="border-bottom: 2px solid #D41D2C"></div>{c}</pre>'
				},
				series: [{
					data: this.line2Data,
					type: 'line',
					symbol: 'circle',
					symbolSize: 5,
					smooth: true,
					itemStyle: {
              normal: {
                lineStyle: {
                  width: 5 // 折线宽度
                }
              }
            }
				}]
			})
		}
  },
  mounted () {
		// id,标题，副标题，百分比，波浪颜色，球体颜色
		this.liquidFill('pie1', 'CPU资源', '48/200', 0.24, '#DB1C1A', '#F0F0F0')
		this.liquidFill('pie2', '内存资源', '100/200', 0.55, '#ED7109', '#F0F0F0')
		this.liquidFill('pie3', '硬盘资源', '48/200', 0.24, '#DB1C1A', '#F0F0F0')
		this.liquidFill('pie4', '网络资源', '100/200', 0.55, '#ED7109', '#F0F0F0')
		this.line1()
		this.bar()
		this.line2()
  }
}
</script>

<style lang="less">
	div.home{
		.pie{
			width:100%;
			height:270px;
		}
		.echartsBox{
			height: 270px;
		}
		.pie1box1{
			margin-right:10px;
			width: calc(25% - 10px);
			height: 270px;
			background: url(../../../../static/images/Layer2.png) no-repeat;
			background-size: 100% 100%;
			&.last{
				width: 25%;
				margin: 0;
			}
			&.p2{
				background-image: url(../../../../static/images/Layer7.png);
			}
		}
		div.homeBox{
			margin-top: 20px;
			div.title{
				padding:20px;
				font-size: 16px;
				font-weight: bold;
			}
			div.eCharts{
				height:455px;
				background: #fff;
				&.lineBox{
					padding: 20px 0
				}
			}
			#line{
				border: 1px solid #F2F2F2;
				height: 415px;
				margin:0 20px;
			}
		}
	}
</style>
